<template>
	<view class="content">
		<view class="topTitle">
			小蓝共享充电
		</view>
		<!-- 地图 -->
		<map class="map" 
		:scale="scale" 
		:latitude="latitude" 
		:longitude="longitude" 
		:markers="markers" 
		@markertap="chooseCharge">
			<!-- 地图顶部 -->
			<view class="topNav">
				<!-- 定位 -->
				<view class="position" @click="getMyposition">
					{{position}}
					<u-icon name="arrow-down" color="#ffffff" size="12"></u-icon>
				</view>
				<!-- 搜索 -->
				<view class="search">
					<u-search 
					    searchIconColor='#248FF9'  
						placeholder="搜索您附近的充电桩"   
						v-model="inputContent" 
						:show-action="false"
					></u-search>
				</view>
				<!-- 扫一扫 -->
				<u-icon  size="40" name="scan" class="sacn" @click="scanThese"></u-icon>
			</view>
			
			<!-- 地图中间 -->
			<view class="myCharge">
				<view class="tit">
					<h3>我的充电桩</h3>
					<span @click="ifDisplay">
						{{ifDisplay_text}}
						<u-icon :name="ifDisplay_icon" color="rgb(108, 106, 106)" size="12"></u-icon>
					</span>
				</view>
				<!-- 已入驻的用户 -->
				<view class="chargeInfo" v-if="!isSettled">
					<view class="chargeInfo_l" v-show="displayChargeInfo">
						<li>
							<u-icon name="map" color="rgb(112,112,112)" size="14"></u-icon>
							<view class="txt1">位置：&nbsp;</view>
							<view class="">重庆市巴南区xxx</view>
						</li>
						<li>
							<u-icon name="order" color="rgb(112,112,112)" size="14"></u-icon>
							<view class="txt1">状态：&nbsp;</view>
							<view class="">{{isUse}}</view>
						</li>
						<li>
							<u-icon name="heart" color="rgb(112,112,112)" size="14"></u-icon>
							<view class="txt1">已充电量：&nbsp;</view>
							<view class="">xxxxxx&nbsp;度</view>
						</li>
						<li>
							<u-icon name="clock" color="rgb(112,112,112)" size="14"></u-icon>
							<view class="txt1">已用时长：&nbsp;</view>
							<view class="">xx:xx:xx</view>
						</li>
						<li>
							<u-icon name="red-packet" color="rgb(112,112,112)" size="14"></u-icon>
							<view class="txt1">收益:&nbsp;</view>
							<view class="">￥&nbsp;00.0</view>
						</li>
					</view>
					<!-- 开关 -->
					<view class="chargeInfo_r" v-show="displayChargeInfo" @click="change_ifOpen">
						<image :src="ifOpen_img">
						</image>
						<text>{{open_close}}</text>
					</view>
				</view>
				
				<!-- 未入驻的用户 -->
				<view class="chargeInfo-ed" v-if="isSettled">
					<view class="txt" v-show="displayChargeInfo">
						<view class="">您暂未开通该服务</view>
						<view class="">请点击下方按钮提交您的充电桩共享申请</view>
					</view>
					<button type="primary" v-show="displayChargeInfo">提交申请</button>
				</view>
			</view>
			<!-- 地图底部 -->
			<view class="chargeExample">
				<!-- 底部左边 -->
				<view class="chargeExample_l">
					<image :src="selectedCharge.img"></image>
				</view>
				<!-- 底部右边 -->
				<view class="chargeExample_r">
					<view class="tit">{{selectedCharge.name}}</view>
					<view class="place">
						<u-icon name="map" color="rgb(112,112,112)" size="14"></u-icon>
						<p>{{selectedCharge.position}}</p>
					</view>
					<view class="nav">
						<u-icon name="order" color="rgb(112,112,112)" size="14"></u-icon>
						<p>状态：&nbsp;{{selectedCharge.state}}</p>
						<span :class="{ifGoback:!selectedCharge.ifGo}">
							<u-icon name="rewind-right" color="rgba(255, 255, 255, 1)" size="14"></u-icon>
							<text>导航</text>
						</span>
					</view>
				</view>
			</view>
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 地图信息
				latitude:29.56471,
				longitude:106.55073,
				scale:17.8,
				
				// 定位
				position:'重庆',
				
				// 我的充电桩状态绑定
				isSettled:false,
				displayChargeInfo:true,
				ifDisplay_text:'点击收起',
				ifDisplay_icon:'arrow-down',
				ifOpen:true,
				open_close:'关闭共享',
				isUse:'使用中',
				ifOpen_img:'../../static/icon_img/close.png',
				
				// 地标上选中的充电桩
				selectedCharge:{
					img:'../../static/index_img/chargeExample.jpg',
					name:'枣营北里小区车库 23号车位',
					position:'北京市朝阳区xxxxxxxxxxxxxx',
					state:'使用中',
					ifGO:false,
				},
				// 附近充电桩位置信息
				markers:[
				],
			}
		},
		created(){
			// 打开云数据库
			const db = uniCloud.database();
			let res = db.collection('map-markers').get().then((res)=>{
				let info = res.result;
				for(var i = 0;i<info.data.length;i++){
					this.markers.push(info.data[i]);
				}
				console.log(this.markers)
			})
		},
		methods: {
			
			// 动态绑定当前选中充电桩的信息
			chooseCharge(e){
				let id = e.markerId;
				this.selectedCharge = this.markers[id].pointInfo;
			},
			// 点击展开或收起充电桩信息
			ifDisplay(){
				this.displayChargeInfo = !this.displayChargeInfo;
				if(this.ifDisplay_text=='点击收起'){
					this.ifDisplay_text = '点击展开'
					this.ifDisplay_icon = 'arrow-up'
				}
				else{
					this.ifDisplay_text = '点击收起'
					this.ifDisplay_icon = 'arrow-down'
				}
			},
			
			// 获取当前位置信息
			getMyposition(){
				console.log("获取当前位置信息");
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:true,
					geocode:true,
					success: ((res) => {
						console.log("当前位置："+res)
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					})
				});
				uni.navigateTo({
					url:'../position/position'
				})
			},
			// 扫一扫
			scanThese(){
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 控制我的充电桩
			change_ifOpen(){
				if(this.ifOpen){
					this.ifOpen_img = '../../static/icon_img/open.png';
					this.open_close = '开启共享';
					this.isUse = '空闲中';
					this.ifOpen = false;
				}
				else{
					this.ifOpen_img = '../../static/icon_img/close.png'
					this.open_close = '关闭共享';
					this.isUse = '使用中';
					this.ifOpen = !this.ofOpen;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 1300rpx;
		.topTitle{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			background: rgb(34,149,255);
			text-align: center;
			border-top: 80rpx solid rgb(34,149,255);
		}
		// 地图
		.map{
			width: 100%;
			height: 100%;
			position: relative;
			// 地图顶部
			.topNav{
				width: 100%;
				height: 100rpx;
				background-color: rgba(46,153,250,0.9);
				display: flex;
				justify-content: flex-start;
				// 定位
				.position{
					width: 15%;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					font-size:30rpx;
					margin-left: 40rpx;
				}
				// 搜索附近充电桩
				.search{
					width: 65%;
					height: 100rpx;
					line-height: 100rpx;
					margin-left: 5rpx;
				}
				// 扫一扫
				.scan{
					width: 10%;
					height: 100rpx;
					margin-left: 40rpx;
				}
			}
			// 地图中间
			.myCharge{
				width: 90%;
				background-color: rgb(245, 245, 245);
				margin-top: 10rpx;
				margin-left: auto;
				margin-right: auto;
				box-shadow: -1px 3px 5px rgb(141, 141, 141);
				border-radius: 5px;
				// 我的充电桩
				.tit{
					width: 90%;
					height: 50rpx;
					margin: auto;
					border-bottom: 5rpx solid rgb(141,141,141);
					display: flex;
					justify-content: space-between;
					h3{
						font-family: PingFangSC;
						font-weight: 700;
						font-size: 18px;
						color: rgb(16, 16, 16);
						font-style: normal;
						letter-spacing: 0px;
						line-height: 25px;
					}
					span{
						display: flex;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 12px;
						color: rgb(108, 106, 106);
						font-style: normal;
						letter-spacing: 0px;
						margin-top: 15rpx;
						line-height: 17px;
						text-decoration: none;
					}
				}
				// 充电信息
				.chargeInfo{
					width: 90%;
					margin-top: 10rpx;
					margin-left: auto;
					margin-right: auto;
					display: flex;
					background-color: rgb(245, 245, 245);
					// 左边
					.chargeInfo_l{
						width: 60%;
						margin-bottom: 20rpx;
						li{
							width: 90%;
							height: 40rpx;
							margin-top: 10rpx;
							margin-left: 10rpx;
							display: flex;
							font-family: PingFangSC;
							font-weight: 400;
							font-size: 28rpx;
							color: rgb(16, 16, 16);
							font-style: normal;
							letter-spacing: 0px;
							text-decoration: none;
							.txt1{
								margin-left: 10rpx;
							}
						}
					}
					// 右边
					.chargeInfo_r{
						width: 160rpx;
						height: 160rpx;
						background: rgb(232,231,230);
						border-radius: 99rpx;
						margin-top: 40rpx;
						margin-left: 40rpx;
						position: relative;
						image{
							width: 100%;
							height: 100%;
						}
						text{
							position: absolute;
							left: 30rpx;
							top: 170rpx;
							font-family: PingFangSC;
							font-weight: 400;
							font-size: 12px;
							color: rgb(108, 106, 106);
							font-style: normal;
							letter-spacing: 0px;
							line-height: 17px;
							text-decoration: none;
						}
					}
				}
				// 未入驻用户
				.chargeInfo-ed{
					width: 100%;
					text-align: center;
					.txt{
						height: 150rpx;
						line-height: 60rpx;
					}
				}
			}
			// 地图底部
			.chargeExample{
				width: 85%;
				height: 200rpx;
				background-color: rgb(245, 245, 245);
				position: absolute;
				bottom: 20rpx;
				left: 60rpx;
				border-radius: 5px;
				display: flex;
				.chargeExample_l{
					width: 25%;
					height: 140rpx;
					margin: 30rpx auto 20rpx 40rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.chargeExample_r{
					width: 65%;
					height: 200rpx;
					.tit{
						width: 100%;
						height: 50rpx;
						margin-top: 20rpx;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 32rpx;
						color: rgb(16, 16, 16);
						line-height: 50rpx;
					}
					.place{
						margin-top: 20rpx;
						display: flex;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 14px;
						color: rgb(16, 16, 16);
						line-height: 40rpx;
					}
					.nav{
						margin-top: 10rpx;
						display: flex;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 28rpx;
						color: rgb(16, 16, 16);
						font-style: normal;
						line-height: 40rpx;
						position: relative;
						span{
							width: 120rpx;
							height: 40rpx;
							background-color: rgb(34,149,255);
							border-radius: 50rpx;
							display: flex;
							justify-content:space-around;
							position: absolute;
							left: 260rpx;
							font-family: PingFangSC;
							font-weight: 400;
							font-size: 25rpx;
							color: rgba(255, 255, 255, 1);
							line-height: 34rpx;
						}
						.ifGoback{
							background-color: rgb(129, 130, 117);
						}
					}
				}
			}
		}
	}

</style>
